<template>
  <view>
    <login v-if="is_login" v-on:x="to_login" v-on:plogin="to_login"></login>
    <view class="banner">
      <swiperList swiperWidth="750rpx" swiperHeight="188rpx" position="2"></swiperList>
    </view>
    <view class="content">
      <view class="img-upload">
        <view class="title">{{ info.deptName }}-{{ info.userName }}邀请您上传笔记~</view>
        <view class="imgs">
          <view class="img" v-for="(item,index) in img_url">
            <image :src="item.split('.')[item.split('.').length-1]=='mp4'?item.replace('.mp4','img.png'):item"></image>
            <view class="x-icon" @click="del(index)">
              <image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/quxiao-x.png">
              </image>
            </view>
          </view>
          <view v-if="is_upload" class="upload" @click="chooseVideoImage">
            <view class="icon">+</view>
            <view class="msg">拍照上传</view>
          </view>
        </view>
        <view class="time" v-if="info.noteType==2">您有{{ allowUploadNum }}次上传机会
        </view>
        <view class="time">
          <view class="time-icon"></view>
          剩余上传时间:
          <yl-count-down :end-time="info.validEndTime"/>
          <!-- {{info.validStartTime}}{{info.validEndTime}} -->
        </view>
      </view>
      <view class="video_info">
        <view class="title">
          {{ info.noteType == 1 ? '直播打卡' : '其它打卡' }}
        </view>
        <view class="video_content">
          <view class="icon">
            <image mode="widthFix"
                   src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/video.png"></image>
          </view>
          <view class="text">{{ info.title }}</view>
        </view>
      </view>
      <button class="add" @click="tijiao">确定提交</button>
    </view>

    <view class="status" v-if="status_show">
      <view class="icon">
        <image src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fuli/icon_bijichenggong.png">
        </image>
      </view>
      <view class="msg">笔记上传成功！</view>
      <view class="button" @click="to_sindex()">回到首页 看更多精彩视频</view>
      <view class="datetime">
        <text>{{ toSindexTime }}</text>
        秒 后自动跳转首页
      </view>
      <!--      <view class="xian"></view>-->

      <!--      <view class="status-title">-->
      <!--        推荐视频-->
      <!--      </view>-->
      <!-- 视频推荐 -->
      <!--      <scroll-view class="list" :scroll-y="true" v-if="video_list.length>0">-->
      <!--        <view v-if="index<4" v-for="(item,index) in video_list" class="item" @click="to_sindex(item)">-->
      <!--          <view class="video-img">-->
      <!--            <image style="width: 100%;height: 100%;" mode="aspectFill" :src="item.coverUrl"></image>-->
      <!--            <view class="zhezhao"></view>-->
      <!--            <view class="video_pay">-->
      <!--              <uni-icons size="30" color="#fff" type="videocam"></uni-icons>-->
      <!--            </view>-->
      <!--            <view v-if="index<2" class="tuijian">推荐</view>-->
      <!--          </view>-->
      <!--          <view class="video-info-box">-->
      <!--            <view class="video-info-title">{{item.title}}</view>-->
      <!--            <view class="video-info-num">播放量：{{item.playCount}}</view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </scroll-view>-->
    </view>
    <!-- 已上传打开笔记显示缺省图 -->
    <view class="bk" v-if="allowUploadNum===0">
      <image mode="aspectFill"
             src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/img_wanchengwuxuchongfu.png"></image>
      <view class="message">您已完成上传任务<p></p>无需重复上传</view>
      <view class="button" @click="to('/videoNote/log/log')">查看上传记录</view>
    </view>
    <!-- 打开笔记任务为开始显示缺省图 -->
    <view class="bk" v-if="is_start_time && allowUploadNum!=0">
      <image mode="aspectFill"
             src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
      <view class="message">打卡笔记任务未开始<p></p>如有疑问请与店长沟通~</view>
      <!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
    </view>
    <!-- 打开笔记任务已结束显示缺省图 -->
    <view class="bk" v-if="is_end_time && allowUploadNum!=0">
      <image mode="aspectFill"
             src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
      <view class="message">打卡笔记任务已结束<p></p>如有疑问请与店长沟通~</view>
      <!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
    </view>
    <!-- 接口出错了显示缺省图 -->
    <view class="bk" v-if="is_err">
      <image mode="aspectFill"
             src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/img_shuaxin.png"></image>
      <view class="message">当前页面未正常打开<p></p>请刷新页面~~</view>
      <view class="button" @click="findUserNote">刷新页面</view>
    </view>
    <!-- 接口返回错误信息显示缺省图 -->
    <view class="bk" v-if="is_err_message">
      <image mode="aspectFill"
             src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
      <view class="message">{{ err_message }}</view>
      <!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
    </view>
  </view>

</template>

<script>
import datediff from "@/components/ywz-DateDiff/ywz-DateDiff.vue"
import {
  uploadFile2,
} from "../../common/COSbeijing"

export default {
  data() {
    return {
      cameraList: [{
        value: 'back',
        name: '后置摄像头',
        checked: 'true'
      },
        {
          value: 'front',
          name: '前置摄像头'
        },
      ],
      cameraIndex: 0,
      status_show: false,
      info: {},
      img_url: [],
      is_login: false,
      video_list: [],
      file_type: "",
      allowUploadNum: "",
      is_upload: true,
      is_start_time: false,
      is_end_time: false,
      is_err: false,
      is_err_message: false,
      err_message: "",
      toSindexTime: 3,
      isSubmit: true
    }
  },
  onLoad(e) {
    if (!uni.getStorageSync("token")) {
      uni.showToast({
        title: "请授权登录后提交笔记",
        icon: "none"
      })
      this.is_login = true;
    }
    this.info = JSON.parse(e.info);
    console.log(e.info)
    this.findUserNote()
  },
  components: {datediff},
  onShow() {
  },

  methods: {
    //返回上一页
    //检测接口
    findUserNote() {
      try {
        this.$NoteApi.doRequest('get', 'note/customer/findUserNote', {noteId: this.info.id}).then(res => {
          if (res.data.code == 0 && res.statusCode == 200) {
            this.is_err = false
            this.is_err_message = false
            this.allowUploadNum = res.data.data.allowUploadNum
            // let Time=new Date().getTime();
            // //结束时间
            // let endTime=new Date(res.data.data.validEndTime).getTime();
            // //开始时间
            // let startTime=new Date(res.data.data.validStartTime).getTime();
            // //活动未开始
            if (res.data.data.activityStatus == 1) {
              this.is_start_time = true;
            }
            //活动结束
            if (res.data.data.activityStatus == 3) {
              this.is_end_time = true;
            }
          } else {
            if (res.data.message) {
              this.is_err_message = true;
              this.err_message = res.data.message
            } else {
              this.is_err = true
            }

          }

        })
      } catch (e) {
        //TODO handle the exception
        console.log(e, '抛出异常')
      }

    },
    chooseVideoImage() {
      uni.showActionSheet({
        title: "选择上传类型",
        itemList: ['图片', '视频'],
        success: (res) => {
          if (res.tapIndex == 0) {
            //选择图片

            this.chooseImg();
          } else {
            //选择视频

            this.chooseVideo()
          }
        }
      })
    },
    to(url) {
      uni.navigateTo({
        url: url
      })
    },
    chooseImg() {
      if (this.file_type == 'video' && this.img_url.length == 0) {
        this.img_url = [];
      }
      this.file_type = 'img'
      if (this.img_url.length >= 3) {
        uni.showToast({
          title: "最多可上传三张",
          icon: "error"
        })
        return false;
      }
      var _this = this;
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          let filePath = await _this.compressImage(res.tempFiles[0].path)
          // var filePath = res.tempFiles[0].path;
          var filename = filePath.substr(filePath.lastIndexOf('/') + 1);
          uploadFile2(filePath, filename).then(res => {
            _this.img_url.push('https://' + res.Location.replace("noteupload-1301970825.cos.ap-beijing.myqcloud.com",
                "image.renruikeji.cn"))
            if (_this.img_url.length == 3) {
              _this.is_upload = false
            }
          })
        }
      })
    },
    // 图片压缩
    compressImage(url) {
      return new Promise((resolve, reject) => {
        uni.compressImage({
          src: url,
          quality: 50,
          success: res => {
            console.log(res, '压缩后的图片')
            resolve(res.tempFilePath)
            // if(res.tempFiles[0].size>=4000000){
            // 	console.log(res.tempFiles[0].size)
            // 	uni.showToast({
            // 		title:"图片不能大于4M",
            // 		icon:"none"
            // 	})
            // 	return
            // }
          }
        })
      })
    },
    chooseVideo() {
      if (this.file_type == 'img') {
        this.img_url = [];
      }
      this.file_type = "video"
      // 上传视频
      if (this.img_url.length >= 1) {
        uni.showToast({
          title: "最多可上传一个视频",
          icon: "none"
        })
        return false;
      }
      var _this = this;

      uni.chooseVideo({
        maxDuration: 60,
        count: 1,
        camera: this.cameraList[this.cameraIndex].value,
        sourceType: ['album', 'camera'],
        success: (responent) => {
          uni.showLoading({
            title: "上传中请稍等"
          })
          let videoFile = responent.tempFilePath;
          var filename = videoFile.substr(videoFile.lastIndexOf('/') + 1);
          uploadFile2(videoFile, filename, true).then(res => {
            uni.hideLoading()
            _this.img_url.push('https://' + res.Location.replace("noteupload-1301970825.cos.ap-beijing.myqcloud.com",
                "image.renruikeji.cn"))
            if (_this.img_url.length == 1) {
              _this.is_upload = false
            }
          })
        }
      })
    },
    del(index) {
      var img = this.img_url;
      delete img[index];
      var arr = [];
      img.map((k, v) => {
        arr.push(k);
      })
      this.img_url = arr;
      this.is_upload = true;
    },
    tijiao() {
      var _this = this;
      var data = {};
      var img = this.img_url;
      if (img.length < 1) {
        uni.showToast({
          title: '请先点击左上角加号将笔记拍照上传后再点击确定提交',
          icon: "none"
        })
        return false;
      }
      if (!this.isSubmit) return;
      this.isSubmit = false;
      data.noteUrl = img.toString();
      data.noteId = this.info.id;
      _this.$NoteApi.doRequest("post", "note/customer/save/v2", data, 'json').then(res => {
        _this.isSubmit = true;
        if (res.data.code == 0) {
          uni.setNavigationBarTitle({
            title: '笔记上传成功'
          })
          // _this.get_video(res.data.data);
          _this.status_show = true;
          let timer = setInterval(() => {
            this.toSindexTime--
            if (this.toSindexTime <= 0) {
              clearInterval(timer)
              this.to_sindex();
            }
          }, 1000)
        } else if (res.data.code == 401 || res.data.code == 406) {
          uni.showToast({
            title: '请授权登录后提交笔记',
            icon: "none"
          })
          this.is_login = true;
        } else {
          uni.showToast({
            title: res.data.message,
            icon: "none"
          })
        }
      })
    },
    to_login() {
      this.is_login = false
      this.findUserNote()
    },
    get_video(id) {
      var _this = this;
      var data = {
        noteId: id
      };
      // 测试地址
      // var url = "ruiVideo/index/list"; //首页接口
      var url = "ruiVideo/afterNote/list"; //打卡完成
      _this.$NoteApi.doRequest("get", url, data).then(res => {
        if (res.data.code == 0) {
          _this.video_list = res.data.data
        }
      })
    },
    to_sindex() {
      uni.setStorageSync("to_index_message", true)
      uni.switchTab({
        url: '/pages/sindex/index'
      })
    }

  }
}
</script>

<style lang="scss">
.bk {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bk image {
  width: 410upx;
  height: 410upx;
}

.bk .message {
  width: 100%;
  margin-top: 10upx;
  text-align: center;
  font-size: 32upx;
  color: #333;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 51upx;
}

.bk .button {
  width: 300upx;
  height: 80upx;
  line-height: 80upx;
  color: #2580F0;
  font-size: 34upx;
  border-radius: 49upx;
  border: 2upx solid #2580F0;
  text-align: center;
  margin-top: 60upx;
}

page {
  background-color: #F6F6F6;
}

.content {
  width: 100%;
  height: 100vh;
  background-color: #F6F6F6;
  box-sizing: border-box;
  padding: 30upx;
}

.banner {
  width: 750upx;
  margin-bottom: 30upx;
  background-color: #fff;
}

.img-upload {
  width: 100%;
  background-color: #fff;
  border-radius: 8upx;
  box-sizing: border-box;
  padding: 38upx 44upx;
  padding-top: 0;
}

.img-upload .title {
  min-height: 108upx;
  line-height: 108upx;
  font-size: 38upx;
  color: #333;
  font-weight: 500;
  box-sizing: border-box;
  border-bottom: 2upx solid #E8E8E8;
}

.imgs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24upx;
}

.imgs .upload {
  border: 6upx dashed #979797;
  width: 200upx;
  height: 200upx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 150upx;
  box-sizing: border-box;
  color: #979797;

}

.upload .icon {
  line-height: 70upx;
}

.imgs .upload .msg {
  font-size: 35upx;
  color: #979797;
  width: 100%;
  text-align: center;
  z-index: 1;
  margin-top: 20upx;
  font-weight: 600;
}

.imgs .img {
  width: 200upx;
  height: 200upx;
  margin-right: 36upx;
  border-radius: 8upx;
  position: relative;
  background-color: #DDDDDD;
  margin-bottom: 10rpx;
}

.imgs .img image {
  width: 100%;
  height: 100%;
}

.x-icon {
  width: 30upx;
  height: 30upx;
  border-radius: 50%;
  position: absolute;
  top: -15upx;
  right: -15upx;
}

.video_info {
  width: 100%;
  border-radius: 8upx;
  background-color: #fff;
  margin-top: 50upx;
}

.video_info .title {
  font-size: 36upx;
  color: #333;
  font-weight: 500upx;
  height: 98upx;
  border-bottom: 2upx solid #F1F1F1;
  line-height: 98upx;
  box-sizing: border-box;
  padding-left: 28upx;
}

.video_content {
  box-sizing: border-box;
  padding: 46upx 62upx;
  font-size: 36upx;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video_content .icon {
  width: 96upx;
  height: 96upx;
  margin-right: 38upx;
}

.video_content .icon image {
  width: 100%;
  height: 100%;
}

.video_content .text {
  flex: 1;
}

.add {
  width: 100%;
  height: 104upx;
  font-size: 40upx;
  color: #fff;
  font-weight: 500;
  background-color: #54B174;
  border: none;
  border-radius: 12upx;
  margin-top: 102upx;
}

.status {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 100vh;
  left: 0upx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: status-donghua 1s forwards;
  z-index: 10;
}

@keyframes status-donghua {
  0% {
  }

  100% {
    top: 0vh;
  }
}

.status .icon {
  width: 242upx;
  height: 188upx;
  margin-top: 40upx;
}

.status .icon image {
  width: 100%;
  height: 100%;
}

.status .msg {
  font-size: 38upx;
  color: #666666;
  font-weight: 500;
  margin-top: 30upx;
}

.status .button {
  font-size: 42upx;
  font-weight: 500;
  color: #fff;
  border-radius: 12upx;
  width: 620upx;
  height: 104upx;
  line-height: 104upx;
  text-align: center;
  margin-top: 125upx;
  background-color: #5CAE77;
}

.status .datetime {
  margin-top: 77upx;
  font-size: 36upx;
  color: #999999;
}

.status .datetime text {
  color: #333;
}

.xian {
  width: 100%;
  height: 24upx;
  background-color: #F1F1F1;
  margin-top: 50upx;
}

.list {
  flex: 1;
  width: 100%;
  overflow: auto;
  position: relative;
  box-sizing: border-box;
  padding: 20upx 30upx;
}

.status-title {
  width: 690upx;
  height: 74upx;
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fuli/img_tuijianshiping1.png);
  margin: 20upx auto;
  background-size: 100% 100%;
  font-size: 40upx;
  color: #000;
  font-weight: 600;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding-left: 40upx;
}

.item {
  display: flex;
  width: 100%;
  height: 190upx;
  margin-bottom: 40upx;
}

.item .video-img {
  width: 190upx;
  height: 190upx;
  border-radius: 12upx;
  position: relative;
}

.zhezhao {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.4;
}

.tuijian {
  width: 91upx;
  height: 40upx;
  line-height: 40upx;
  text-align: center;
  border-radius: 0upx 0upx 10upx 0upx;
  color: #fff;
  background: linear-gradient(126deg, #FF6A6A 0%, #FF6500 100%);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 28upx;
}

.video_pay {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .video-info-box {
  flex: 1;
  margin-left: 20upx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-info-title {
  font-size: 36upx;
  color: #000;
  font-weight: 500;
}

.video-info-num {
  box-sizing: border-box;
  padding: 2upx 0upx;
  font-size: 26upx;
  color: #666;
  background-color: #F2F2F2;
  width: 202upx;
  text-align: center;
}

.to-video-info {
  margin-top: 24upx;
  flex: 1;
  overflow: auto;
}

.to-video-info .to-video-title {
  width: 100%;
  text-align: center;
  font-size: 30upx;
  margin-top: 10upx;
  font-weight: 600;
}

.to-video-time {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34upx;
  color: #D1D1D1;
  font-weight: 400;
  position: absolute;
  bottom: 30upx;

}

.to-video-time image {
  width: 40upx;
  height: 40upx;
  margin-right: 5upx;
}

.to-video-img {
  position: relative;
  width: 690upx;
  height: 690upx;
  border-radius: 20upx;
}

.to-video-img video {
  width: 100%;
  height: 100%;
  border-radius: 20upx;
}

.to-video-img .video_pay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120upx !important;
  height: 120upx !important;
  z-index: 10;
}

.video_pay image {
  width: 100%;
  height: 100%;
}

.video-zhezhao {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.3;
  border-radius: 20upx;
}

.video-gif {
  width: 310upx;
  height: 310upx;
  position: absolute;
  top: 57%;
  left: 57%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

.video-gif image {
  width: 100%;
  height: 100%;
}

.donghua {
  width: 0%;
  height: 10upx;
  border-radius: 20upx;
  background-color: red;
  animation: donghua-d 4s forwards;
  position: absolute;
  bottom: 0upx;
  left: 50%;
  transform: translate(-50%, 0%);
}

@keyframes donghua-d {
  0% {
  }

  100% {
    width: 100%;
  }
}

.time {
  margin-top: 40upx;
  font-size: 30upx;
  color: #4C4A58;
  display: flex;
  align-items: center;
}

.time-icon {
  width: 40upx;
  height: 40upx;
  margin-right: 10upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/timeData.png");
  background-size: 100% 100%;
}
</style>
